<template>
	<view class="box">
		<view class="title">
			请输入当前{{label}}
		</view>
		<view class="input-data">
			<input type="number" v-model.trim.number="value" maxlength="3" /><label>{{unit}}</label>
		</view>
		<button class="btn-save text-interval" @click="handleShow(0)">保存</button>
		<label class="text-interval" @click="handleShow(1)">取消</label>
	</view>
</template>

<script>
	import {
		heightVerify,
		weighVerify
	} from '../util/verify.js'
	export default {
		props: ['inputLabel', 'inputUnit'],
		data() {
			return {
				value: '',
				valueLabel: ''
			}
		},
		methods: {
			handleShow(index) {
				if (index == 0 && this.value == '') {
					this.$showMsg('数据不能为空')
					return
				}
				if (index == 0 && this.valueLabel == '身高') {
					let [res, msg] = heightVerify(this.value)
					if (!res) {
						this.$showMsg(msg)
						return
					}
				}
				if (index == 0 && this.valueLabel == '体重') {
					let [res, msg] = weighVerify(this.value)
					if (!res) {
						this.$showMsg(msg)
						return
					}
				}
				if (index == 1) {
					this.$emit('delay', false)
					return
				}
				this.$emit('delay', true, this.valueLabel, this.value)
			}
		},
		computed: {
			label: function() {
				this.valueLabel = this.inputLabel
				return this.inputLabel
			},
			unit: function() {
				return this.inputUnit
			}
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		text-align: center;
		color: black;
		width: 300rpx;
		padding: 30rpx;
		background-color: #fefefe;

		.input-data {
			height: 50rpx;

			label {
				color: #ebebeb;
				position: relative;
				top: -20%;
				transform: translateY(-50%);
			}

			input {
				font-weight: 600;
				margin-right: 10rpx;
				width: 100rpx;
				display: inline-block;
				border-bottom: 2rpx solid #f0f0f0;
			}

			margin: 50rpx 0;
		}


		.btn-save {
			width: 80%;
			background-color: #23c589;
			color: white;
			border-radius: 50rpx;
			margin-bottom: 20rpx;
		}
	}

	.text-interval {
		font-size: 0.8rem;
		letter-spacing: 2rpx;
	}
</style>